<template>
  <mt-popup v-model="visible" position="bottom" style="width:100%;">
    <div class="mint-datetime" ref="mdTimePicker">
      <mt-picker class="mint-datetime-picker"
                 :slots="slots"
                 value-key="text"
                 :visible-item-count="visibleItemCount"
                 @change="onValuesChange"
                 showToolbar>
          <span class="mint-datetime-action mint-datetime-cancel"
                @click="handleClose">{{ cancelText }}</span>
        <span class="mint-datetime-action mint-datetime-confirm"
              @click="fillDateTime">{{ confirmText }}</span>
      </mt-picker>
    </div>
  </mt-popup>
</template>

<script>
  export default {
    name: 'MdTimePicker',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      visibleItemCount: {
        type: Number,
        default: 5
      },
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '确定'
      }
    },
    data() {
      return {
        visible: this.value,
        slots: [{
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'center'
        }, {
          flex: 1,
          values: [],
          className: 'slot2',
          textAlign: 'center'
        }],
        timeObj: [],
        checkedTime: null
      }
    },
    mounted() {
      this.initPicker();
      this.$refs.mdTimePicker.getElementsByClassName('picker-center-highlight')[0]
        .className += ' temp-picker-border'
    },
    methods: {
      initPicker() {
        this.slots[0].values = this.getDate(30, 'MM月dd日[周W]');
        this.slots[1].values = this.getTime();
      },
      getTime() {
        let timeArr = [];
        let n;
        for (let i = 8; i <= 20; i++) {
          if (i < 10) {
            n = '0';
          } else {
            n = '';
          }
          timeArr.push(`${n + i}:00`);
          timeArr.push(`${n + i}:30`);
        }
        timeArr.splice(timeArr.length - 1, 1);
        return timeArr;
      },
      getDate(str, day_count, format) {
        let chrWeek = ['日', '一', '二', '三', '四', '五', '六'];
        if (typeof str === "number") {
          format = day_count;
          day_count = str;
          str = new Date();
        }
        let newDate = new Date(str);
        let dates = [];
        for (let i = 0; i <= day_count; i++) {
          let d = null;
          let year, month, date, week;
          if (format) {
            var fmt = format;
            year = newDate.getFullYear();
            month = newDate.getMonth() + 1;
            date = newDate.getDate();
            week = newDate.getDay();
            date = date < 10 ? ('0' + date) : date;
            month = month < 10 ? ('0' + month) : month;
            fmt = fmt.replace(/y{4}/, year);
            fmt = fmt.replace(/M{2}/, month);
            fmt = fmt.replace(/d{2}/, date);
            fmt = fmt.replace(/W/, chrWeek[week])
            d = fmt;
          } else {
            d = newDate.getFullYear() + "-" + newDate.getMonth() + "-" + newDate.getDate();
          }
          dates.push({text: d, value: `${year}-${month}-${date}`});
          newDate.setDate(newDate.getDate() + 1);
        }
        return dates;
      },
      onValuesChange(picker, val) {
        let tempVal;
        if (val[0])
          tempVal = val[0].value;
        if (val[1])
          tempVal += ' ' + val[1];
        this.checkedTime = tempVal;
      },
      handleClose() {
        this.$emit('pickerClose', (this.visible = false))
      },
      fillDateTime() {
        this.$emit('pickerClose', (this.visible = false))
        this.$emit('complete', this.checkedTime)
      }
    },
    watch: {
      value(val) {
        this.visible = val;
      },
      visible(val) {
        this.$emit('input', val);
      }
    }
  }
</script>
<style lang="scss">
  .temp-picker-border {
    @mixin bgColor {
      $bgVar: left, #FAFAFA, #5F5F5F, #FAFAFA, #5F5F5F, #FAFAFA;
      background: -moz-linear-gradient($bgVar);
      background: -o-linear-gradient($bgVar);
      background: -webkit-linear-gradient($bgVar);
    }
    &:before, &:after {
      @include bgColor;
    }
  }
</style>
